<template>
    <div class="marketing_group_detail_group">
        <el-button
            type="primary"
            v-auth="'enough_list:edit'"
            v-if="[1, 2].includes(props.status)"
            class="edit_group_btn"
            @click="editHandler"
            >编辑</el-button
        >
        <el-descriptions :column="1" class="custom-el-desc">
            <template #title><h1>基础设置</h1></template>
            <el-descriptions-item
                v-for="{ label, prop } in commonList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                <template v-if="['activityGoodTypeText'].includes(prop)">
                    <div class="activity-good-type">
                        {{ form[prop] }}
                        <ZwSelectedGoods
                            v-if="form.activityGoodType != 1"
                            :disabled="true"
                            :isParticipationCol="true"
                            :customTitle="form.activityGoodType == 2 ? '以下商品参加' : '以下商品不参加'"
                            :value="form.goodsIds"></ZwSelectedGoods>
                    </div>
                </template>
                <template v-else>
                    {{ form[prop] }}
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1">
            <template #title><h1>优惠设置</h1></template>
            <el-descriptions-item
                v-for="{ label, desc, prop } in advancedList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                <template v-if="label === '优惠规则：'">
                    <div>
                        单笔订单活动商品{{ form?.activityType == 7 ? '金额' : '件数' }}满
                        {{ form?.discountSet?.orderAmount }} {{ form?.activityType == 7 ? '元' : '件' }}，{{
                            form?.activityType == 7 ? '减' : '打'
                        }}
                        {{ form?.discountSet?.reduce }}
                        {{ form?.activityType == 7 ? '元' : '折' }}
                    </div>
                </template>
                <template v-else>
                    <div class="custom-desc-dev">
                        <div class="custom-icon">
                            <el-icon>
                                <Select v-if="form?.discountSet?.[prop] == 2" />
                                <CloseBold v-else
                            /></el-icon>
                        </div>
                        {{ form?.discountSet?.[prop] == 2 ? '已' : prop == 'discountRepeat' ? '不' : '未' }}{{ desc }}
                    </div>
                </template>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue';
import request from '@/request/index';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();

let form = reactive({});
const commonList = [
    { name: '', label: '活动名称：', desc: '', prop: 'activityName' },
    { name: '', label: '活动时间：', desc: '', prop: 'activityTime' },
    { name: '', label: '活动商品：', desc: '', prop: 'activityGoodTypeText' }
];
const advancedList = [
    { name: '', label: '优惠规则：', prop: 'orderAmount' },
    { name: '', label: '优惠叠加：', desc: '允许叠加使用优惠券', prop: 'discountRepeat' },
    { name: '', label: '满减包邮：', desc: '开启满减包邮', prop: 'fullReduceMail' }
];
// todo: 根据后台返回计算普通和高级设置

const props = defineProps(['id', 'type', 'status']);

const editHandler = () => {
    const typeNames = {
        7: 'yuanEdit',
        8: 'pieceEdit'
    };
    const path = `/marketing/enough/${typeNames[props.type]}`;
    router.push({
        path,
        query: {
            id: props.id
        }
    });
};

const getDetail = async () => {
    const { data } = await request('fullreduceInfo', { id: props.id });
    data.activityTime = `${data.activityStartTime} 至 ${data.activityEndTime}`;
    if (data.activityType == 7) {
        data.discountSet.orderAmount = data.discountSet.orderAmount / 100;
        data.discountSet.reduce = data.discountSet.reduce / 100;
    } else {
        data.discountSet.reduce = data.discountSet.reduce / 10;
    }
    const goodTypes = {
        1: '全部商品参加 ',
        2: '指定商品参加',
        3: '指定商品不参加'
    };
    data.activityGoodTypeText = goodTypes[data.activityGoodType];
    Object.assign(form, data);
};

onMounted(() => {
    getDetail();
});
</script>

<style lang="scss">
.sku-table-inline {
    display: inline-block;
    border: 1px solid #eaeaea !important;
    max-width: 90%;
    min-width: 800px;
    tbody tr:first-of-type {
        td:first-of-type {
            border-right: 1px solid #eaeaea;
        }
    }
    .good-preview {
        display: flex;
        align-items: center;
        & > div {
            &:first-of-type {
                margin-right: 8px;
                min-width: 36px;
            }
            &:last-of-type {
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
        }
        h5,
        p {
            margin: 0;
        }
        h5 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
        p {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
}
</style>
<style lang="scss" scoped>
.marketing_group_detail_group {
    position: relative;
    background: #fff;

    :deep .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
        display: flex;
    }

    h1 {
        font-size: 14px;
        font-weight: 500;
        position: relative;
        padding-left: 15px;
        margin: 0;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            width: 3px;
            height: 70%;
            background-color: var(--el-color-primary);
        }
    }
    .edit_group_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
    }
    .custom-el-desc {
        margin-top: 10px;
        margin-bottom: 40px;
    }
    :deep .custom-label {
        width: 90px;
        text-align: right;
        display: inline-block;
        margin-right: 0px;
        color: #969696;
    }
    :deep {
        .el-descriptions__content {
            color: #33302d;
        }
    }
    .custom-desc-dev {
        display: flex;
        align-items: center;
        line-height: initial;
    }
    .custom-icon {
        width: 14px;
        height: 14px;
        background: #ffeded;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        :deep .el-icon {
            color: #fe292b;
            width: 11px;
        }
    }

    .custom-checkbox {
        margin-top: 10px;
        padding-left: 19px;
    }

    .activity-good-type {
        display: flex;
        align-items: flex-start;
        & > div {
            margin-top: -5px;
        }
    }
}
</style>
